<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="zlst-components-uploadFile-uploadThirdStep">

        <div class="form-item">
            <div class="form-title-top">导入结果</div>
            <div>
                <div v-show="insertSQLResult.resultCode===0?true:false">数据导入成功</div>
                <div v-show="insertSQLResult.resultCode!=0?true:false">{{insertSQLResult.data.resultMsg}}</div>
            </div>
        </div>

        <div class="form-item">
            <div class="col_50_container">
                <span class="font_14">导入结果：</span>
                成功{{insertSQLResult.data.successRecord}}条，失败{{insertSQLResult.data.faileRecord}}条</div>
            <div class="col_50_container text-right">
                <a v-show="insertSQLResult.data.faileRecord>0?true:false" :href="downError">下载失败文件</a>
            </div>
            <div class="clear_both"></div>
        </div>

        <div class="form-item">
            <Table :columns="columns1" :data="errorDataArray"></Table>
            <div style="margin-top:10px;text-align: center">
                <Page :total="pageTotal" :page-size="pageSize" show-elevator @on-change="pageChangeAction"></Page>
            </div>
        </div>

    </div>
</template>


<script>
    import Ajax from "../../js/Ajax/index.js"
    Ajax.init({
        baseUrl: "",          // 是否设置 http(s)://***.com/, 即 http_origin，默认为空
        apiList: {},    // http请求地址的字典型
         checkToken: false     // 是否在每个请求的头部设置token，默认为true
    });
    var getData = Ajax.methods;
    export default {
        props:{
            // server URL
            serverUrl: {
                type: String,
                default: ''
            },
            insertSQLResult:{
                type: Object,
                default: function (){
                    return {};
                }
            },
            errorDataArray:{
                type: Array,
                default: function (){
                   return this.insertSQLResult.data.resultlist.objList;
                }
            },
            downError:{
                type:String,
                default:function () {
                    return "http://localhost/cpsFimImportinfo/downErrorCord/"+this.insertSQLResult.data.importbyfileId;
                }
            }
        },
        mounted: function () {
//            console.dir(this.insertSQLResult);
            // 翻页插件初始化
            //this.pageTotal = this.insertSQLResult.data.resultlist.count;
        },
        data: function () {
            return {
                columns1: [
                    {
                        title: '行数',
                        key: 'rowNo'
                    },
                    {
                        title: '失败原因',
                        key: 'errorInfo'
                    }
                ],
                // 总记录条数
                pageTotal:this.insertSQLResult.data.resultlist.count ,
                // 当前页面
                currentPage: this.insertSQLResult.data.resultlist.pageNum,
                // 每页显示10条数据
                pageSize : this.insertSQLResult.data.resultlist.pageSize,

            }
        },
        computed: {
            // 当前页面的表格数据
            currentPageData: function () {
            },
        },
        methods: {
            //查询
            query: function(opts) {
                var that = this;
                getData.getUrl(this.serverUrl + '/CpsFimImportrecord/searchWithFilters', {
                    params: opts
                })
                .then(function(res) {
                    that.errorDataArray = res.data.data;
                    that.pageTotal = res.data.totalNum;
                });
            },
            // 翻页 触发的事件
            pageChangeAction: function (page) {
                this.query({
                    page: page,
                    rows: this.pageSize,
                    data: JSON.stringify({
                        "filters":{ "groupOp": "and"
                            , "rules": [{
                                        "field": "resultCode",
                                            "data": '0',
                                            "op": "nq"
                                    },
                                {
                                    "field": "importbyfileId",
                                    "data": this.insertSQLResult.data.importbyfileId,
                                    "op": "eq"
                                }]
                        }

                    })
                });
            },
//            下一步按钮触发事件
            beforeStep: function () {
                this.$emit("before-step");
            },
//            取消按钮触发的事件
            cancelAction: function () {
                this.$emit("cancel");
            },
        },
    }
</script>

<style lang="scss">
    .zlst-components-uploadFile-uploadThirdStep{
        /*一个表单输入项——包含 标签和表单*/
        .form-item{
            margin: 15px 0;
            /*表单的提示信息*/
            .form-title-top{
                font-size: 14px;
                line-height: 28px;
            }
        }


        .col_50_container{
            float: left;
            width: 50%;
        }

        .clear_both{
            clear: both;
        }

        .text-right{
            text-align: right;
        }

        .font_14{
            font-size: 14px;
        }

        .footer-btn-container{
            text-align: center;
            .nextStep{
                margin-right: 10px;
            }
        }
    }
</style>
